<script setup>
const router = useRouter()
const backIndex = () => {
  router.push('/')
}
</script>

<template>
  <nav class="sticky-top navbar shadow-sm navbar-bg">
    <div class="container vh4">
      <div class="lh-2 my-color">
        <img src="/favicon.ico" class="rounded float-start pointer" alt="一起帮·源栈" @click="backIndex" />
        <span class="fw-bolder ms-3 fs-5">一起帮</span><span class=""><span> · </span>网络互助平台</span>
      </div>
      <nav-button />
    </div>
  </nav>
</template>

<style scoped>
.vh4 {
  height: 5%;
}

.pointer {
  cursor: pointer;
}

.lh-2 {
  line-height: 2.5;
}

.my-color {
  color: #777;
}

.navbar-bg {
  /* other styles */
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: saturate(50%) blur(8px);
  backdrop-filter: saturate(50%) blur(8px);
}
</style>